<script setup lang="ts">
import {reactive, computed} from 'vue';
import {useAppStore} from "@/store/models/app.ts";
import {Copyright} from '@/config.ts'

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}

const appStore = useAppStore()

const formState = reactive<FormState>({
  username: '',
  password: '',
  remember: true,
});
</script>

<template>
  <main>
    <div class="login">
      <div class="login-back">
        <img src="@/assets/images/login-bg.svg" alt="">
      </div>
      <div class="container" style="width: 1280px;position: relative">
        <div class="row">
          <a-card :bordered="false" :style="{ width: '476px',color:'var(--bs-body-color) ' }"
                  :bodyStyle="{ padding: '24px 46px 40px 46px !important' }">
            <div style="width: 100%;display: grid;">
              <h2 style="font-size: 2rem;color: var(--bs-body-color) !important;">欢迎来到，</h2>
              <h3 style="font-size: 1.75rem;color:  var(--bs-body-color)  !important;margin-bottom: 1em;">
                {{ appStore.title }}</h3>
            </div>
            <a-form
                :model="formState"
                name="normal_login"
                hideRequiredMark
                layout="vertical">
              <a-form-item
                  label="账号："
                  name="username"
                  :rules="[{ required: true, message: '请输入登录账号' }]">
                <a-input v-model:value="formState.username" size="large" placeholder="账号" allowClear>
                </a-input>
              </a-form-item>
              <a-form-item
                  label="密码："
                  name="password"
                  :rules="[{ required: true, message: '请输入登录密码' }]">
                <a-input v-model:value="formState.password" size="large" type="password" placeholder="密码" allowClear>
                </a-input>
              </a-form-item>
              <a-form-item label="验证码：">
                <a-button block size="large">验证码</a-button>
              </a-form-item>
              <a-form-item>
                <a-button type="primary" block size="large">登录</a-button>
              </a-form-item>
            </a-form>
            <a-divider>温馨提示</a-divider>
            <div style="text-align: center;">
              {{ Copyright.system_requirements }}
            </div>
          </a-card>
        </div>
      </div>
    </div>
  </main>
</template>

<style lang="scss" scoped>

.login {
  height: 100vh;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
  padding-bottom: 0 !important;
  padding-top: 3rem !important;
  position: relative !important;

}

.login-back {
  opacity: 0.3;
  margin: 0 !important;
  height: 100% !important;
  width: 100% !important;
  -webkit-transform: translate(-50%, -50%) !important;
  transform: translate(-50%, -50%) !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  overflow: hidden !important;

  img {
    height: 100vh;
  }
}

.row {
  margin-top: 10em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: center !important;
  -ms-flex-pack: center !important;
  justify-content: center !important;
}
</style>